<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>我的活动</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../../plugins/mui/mui.min.css">
	<script src="../../js/statistics.js"></script>
	<style type="text/css">
		*{
			box-sizing: border-box;
			font-family: 'Microsoft YaHei';

		}
		body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,  input, p, table, th, td ,select,option{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		body{

		}
		.mui-table-view:before{
			display:none;
		}
		.mui-table-view:after{
			display:none;
		}
		#list{
			background-color:transparent;
			/*min-height: 100vh;*/
		}

		#list >li{
			height:95px;
			background-color:#fff;
			margin-bottom:9px;
			padding-top:0px;
			padding-bottom:10px;
			padding-left:0;
			padding-right:0;
			position:relative;
		}
		#list >li>div.mui-slider-handle{
			width:100%;
			height:95px;
			position:relative;
			padding-left:2.6%;
			padding-right:2.6%;
			padding-top:10px;
			padding-bottom:10px;
		}
		#list >li>div.mui-slider-handle>p{
			float:left;
			width:75px;
			height:75px;
			background: url() no-repeat center center;
			background-size:cover;
			position: relative;
		}
		#list >li>div.mui-slider-handle>p>img{
			width: 50%;
			left: 0;
			position: absolute;
		}

		#list >li>div.mui-slider-handle>div{
			float:left;
			height:75px;
			/*width:calc( 100% - 5.2% - 75px - 2.6%);*/
			position: absolute;
			/*left:calc(5.2% + 75px);*/
		}
		#list >li>div.mui-slider-handle>div.none{
			float:left;
			height:75px;
			/*width:calc( 100% - 5.2%  );*/
			position: absolute;
			left:2.6%!important;
		}
		#list >li>div.mui-slider-handle>div>p{
			position:absolute;
			top: 50%;
			-webkit-transform: translateY(-50%) ;
			font-size:15px;
			color:#333;
			overflow : hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-break:break-all;
			text-align: left;
		}
		#list >li>div.mui-slider-handle>div>span{
			position:absolute;
			right:0;
			bottom:0;
			font-size: 11px;
			color:#999;
			line-height: 11px;
		}

		.mui-table-view-cell:after{

			display:none;
		}


		.mui-btn-red{
			font-size:15px;
			background-color:#ee3b30;
		}
		#list>li:first-child{
			margin-top:2px;
		}

		.mui-slider-handle>img{
			position:absolute;
			right:2.6%;
			top:10px;
			height:14px;
		}
		/*审核中文字样式修改*/
		.mui-slider-handle>a{
			position:absolute;
			right:2.6%;
			font-size:12px;
			color:#f59f32;
			top:10px;
			height:14px;
		}
		.loser p{
			color:#999!important;
		}
		.loser>div>p{
			opacity: .6;
		}

		/*//空数据*/
		.kong{
			position:absolute;
			width:40%;
			top: 50%;
			left:50%;
			-webkit-transform: translateY(-50%) translateX(-50%);
			display:none;
			margin-top:6.5%;
			/*padding-top: 45px;*/
			z-index: 1500;
		}
		.kong>img{
			width:100%;
		}
		/*新手指南*/
		.guide{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			z-index: 100;
		}
		.guide .modal{
			position:absolute;
			top:0;
			left:0;
			width:100vh;
			height:100vh;
			background: rgba(0,0,0,.65);
		}
	</style>
</head>
<body>

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--数据列表-->
		<ul class="mui-table-view mui-table-view-chevron"  id='list'>
			<!--
                             <li class="mui-table-view-cell " >
                                    <div class="mui-slider-right mui-disabled">
                                        <a class="mui-btn mui-btn-red" data-id='+p+'>删除</a>
                                    </div>
                                    <div class="mui-slider-handle">
                                        <a>正在审核</a>
                                        <p style='background-image: url(../../images/ce1.jpg);'></p>
                                        <div class="none"style="    margin-left: 75px;    width: calc( 100% - 5.2% - 75px - 2.6%);">
                                            <p>你好手机你好手机你好手机你好手机你好手机你好手机你好手机你好手机</p>
                                            <span>2017-12-26</span>
                                        </div>
                                    </div>
                            </li>-->

		</ul>

	</div>
</div>
<div class='kong'>
	<img src="../../images/my/index/null.png" alt="" />
</div>

<script type="text/javascript" src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
<script src="../../plugins/mui/mui.min.js"></script>
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js"></script>
<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
<script type="text/javascript">
	var first=0;
	mui.init({
//		pullRefresh : {
//			container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
////			    down : {
////			      height:50,//可选,默认50.触发下拉刷新拖动距离,
////			      auto: false,//可选,默认false.自动下拉刷新一次
////			      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
////			      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
////			      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
////			      callback :function(){
////			      	  mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
////			      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
//			up : {
//				height:50,//可选.默认50.触发上拉加载拖动距离
//				auto:false,//可选,默认false.自动上拉加载一次
//				contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
//				contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
//				callback :function pullfresh() {
//					if(true){
//						myAjax('personal/my_activity/getAuditing', 'get', {
//							'uid': plus.storage.getItem('cg_user_id'),
//							'user_token': plus.storage.getItem('cg_user_token'),
//							'page_cnt':3,
//							'create_time':updateTime
//						}, function(data) {
//							if(data.success){
//								if(data.data.length == 0){
//									mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
//									
//								}else{
//									if(data.data.length < 3){
//										console.log(1)
//										mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
//									}else{
//										console.log(2)
//										mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
//									}
//									for(var i=0;i<data.data.length;i++){
//										var a=add(data.data[i].path,data.data[i].title,data.data[i].time,data.data[i].id,data.data[i].icon);
//										$('#list').append(a);
//									}
//									var length = data.data.length-1;
//									updateTime = data.data[length].create_time;
//								}
//								calc();
//							}else{
//								mui.toast(data.error_msg);
//							}
//						})
//					}
//					first++;
//
//				}
//			}
//		}
	});



	var updateTime;//第二次ajax用来取数据
	var width;
	mui.plusReady(function() {
		var self = plus.webview.currentWebview();
		width=self.width;
		if(self.height){
			$('#list').css({'minHeight':self.height-95+'px'});
		}
		$('#list').delegate('.mui-slider-handle','tap',function(){
			//审核中活动报名跳转
			mui.toast('报名审核后,才能查看活动详情');
		})



		$('#list').delegate('.mui-btn-red','tap',function(){
			var me=this;//留住this
			mui.confirm('确认取消报名吗？', '取消报名', function(e) {
				if (e.index == 0) {
					//取消
				} else {
					plus.nativeUI.showWaiting('取消报名中...');
					//删除数据
					myAjax('personal/my_activity/getDel', 'post', {
						'id':$(me).attr('data-id'),
						'type':$(me).parents('li').attr('type')
					}, function(data) {

//								var length = data.data.length-1;
//								updateTime=data.data[length].create_time;
						if(data == 1){
							plus.nativeUI.closeWaiting();
							mui.toast('取消报名成功！');
							$(me).parent().parent().fadeOut();
							$(me).parent().parent().remove();
							if(!$('#list>li').length){
								$('.kong').show();
							}
						}else{
							mui.toast(data.error_msg);
						}
					})

				}
			});
		})


		//刚进来自动获取8条数据
		plus.nativeUI.showWaiting();
		myAjax('personal/my_activity/getAuditing', 'get', {
			'uid': plus.storage.getItem('cg_user_id'),
//'uid':'3',
			'user_token': plus.storage.getItem('cg_user_token'),
			'page_cnt':8,
			'create_time':''
		}, function(data) {
			plus.nativeUI.closeWaiting();
			if(data.success){
				console.log(JSON.stringify(data))
				if(!data.data.length){
					$('.kong').show();
					console.log('////')
//					mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
				}else{
//										if(data.data.length<8){
//											mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
//										}else{
						var length = data.data.length-1;
						console.log(length)
						updateTime=data.data[length].create_time;
//										}
					for(var i=0;i<data.data.length;i++){
						var a=add(data.data[i].path,data.data[i].title,data.data[i].time,data.data[i].id,data.data[i].icon,data.data[i].type);
						$('#list').append(a);
					}
				}
				calc();
			}else{
				mui.toast(data.error_msg);
			}
		})

	});
	//a图片,b标题,d时间 ,p消息id,icon标签,type类型
	function add(a,b,d,p,icon,type){
		if(a){
			if(type == 1){
				var a="<p style='background-image: url("+_baseUrl+a+");'>"+ "<img src='" +_baseUrl + icon + "'>" +"</p>";
			}else{
				var a="<p style='background-image: url("+_baseUrl+a+");'>" + "</p>";
			}
			var y=''
		}else{
			var a='';
			var y='none'
		}

//				var c='<img src="../../images/my/index/audit-ing.png"/>'
		//审核中图片修改为===审核中..文字样式
		var c='<a>正在审核</a>'

		var d='<span>'+d+'</span>';

		return '<li class="mui-table-view-cell" type="'+type+'">'+
				'<div class="mui-slider-right mui-disabled">'+
				'<a class="mui-btn mui-btn-red" data-id='+p+'>取消'+'</br>'+'报名</a>'+
				'</div>'+
				'<div class="mui-slider-handle">'+
				c+
				a+
				'<div class="'+y+'">'+
				'<p>'+b+'</p>'+
				d+
				'</div>'+
				'</div>'+
				'</li>'

	}


	//适配CSScalc函数
	function calc(){
		$('#list>li>div.mui-slider-handle>div').css({'width':width*0.922 -75+'px'});
		$('#list>li>div.mui-slider-handle>div').css({'left':width*0.052 + 75 +'px'});
		$('#list >li>div.mui-slider-handle>div.none').css({'width':width*0.948+'px'});
	}
</script>
</body>
</html>
